<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/comm/list.css" media="all">

    <script type="application/javascript" src="/static/js/jQuery.js"></script>
    <script type="application/javascript" src="/static/layui/layui.js"></script>
    <script type="application/javascript" src="/static/js/login.js"></script>
    <script type="application/javascript" src="/static/js/utils.js"></script>
    <script type="application/javascript" th:inline="none">
        $(function(){
            var userName = getCookie("userName");
            $("#currentUserName").text(userName);
        });

        layui.use(["table"], function () {
            var table = layui.table;

            table.render({
                elem: '#customerWorkingList'
                ,url: '/customerRest/list' //数据接口
                ,page: true //开启分页
                ,defaultToolbar:['filter']
                ,toolbar: '#toolbar'
                ,cols: [[
                    {field: 'id', title: 'ID', hide:true}
                    ,{field: 'userName', title: '用户名'}
                    ,{field: 'plan', title: '计划事项'}
                    ,{field: 'planTime', title: '制定时间', templet:function(d){
                            return formatDate(d.planTime);
                        }}
                    ,{field: 'done', title: '是否完成', templet:function(d){
                            return d.done === true ? "已完成" : "未完成";
                        }}
                    ,{field: 'doneTime', title: '完成时间', templet:function (d) {
                            return formatDate(d.doneTime);
                        }}
                    ,{field: 'context', title: '实际情况说明'}
                ]]
            });

            table.on('toolbar(customerWorking)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'addData':
                        layer.open({
                            title: false,
                            type: 2,
                            area: ['81%',"90%"],
                            content: ["/customer/edit"],
                            cancel: function(index, layero){
                                layer.confirm('关闭将不会保存已输入数据，是否关闭?', {icon: 3, title:'提示'}, function(i){
                                    //do something
                                    layer.close(i);
                                    layer.close(index);
                                });
                                return false;
                            }
                        });
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                };
            });
        })
    </script>
</head>
<body>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
        </div>
    </script>
    <div class="listBody">
        <div class="listTile">
            <div class="welcome">
                欢迎使用
            </div>
            <div class="loginUser">
                当前登录:<span id="currentUserName"></span>
            </div>
        </div>
        <div class="listContext">
            <table id="customerWorkingList" lay-filter="customerWorking" lay-data="{id: 'customerWorkingTableId'}"></table>
        </div>
    </div>


</body>
</html>